Menú Revolution Elements

Revolution elements es una plantilla de Wordpress diseñada por Jason Schuller y adaptada a Blogger por Joyful Thiek

Me gustó nada más verla, pero lo que más llamó mi atención fue el menú que sobre fondo oscuro resalta más la elegancia de la plantilla.

Conseguir ese menú no es complicado cuando con anterioridad alguien tuvo la genial idea de crearlo. En plantilla Edición de HTML justo antes de ]]></b:skin> añadimos los estilos.

/* Navigation Menu
------------------------------------------------*/
ul.nav {
list-style:none;
background:url(url-imagen-fondo-menu) top left no-repeat;
float:right;
color:#BDAFA8;
margin:20px 0px 0px 0px;
height:65px;
width:522px;
padding:8px 0px 0px 18px;
}
.nav li{
border-right:1px solid #333333;
float:right;
display:block;
width:100px;
}
.nav li a{
font-family: Helvetica, "Lucida Grande", "Lucida Sans Unicode",Verdana,Arial,Helvetica,sans-serif;
font-size:13px;
outline:none;
color: #eeeeee; /*#62C214;*/
text-decoration:none;
display:block;
padding:5px 0 12px 5px;
width:95px;
text-transform:uppercase;
}
.nav li a span{
font-size:12px;
color:#7f7f7f;
text-transform:lowercase;
}
.nav li a:hover{
background: url(url-imagen-transparencia);
color: white;
width:95px;
}
* html .nav li a:hover{
background:#e6e6e6;
width:99px;
}
.nav li.skip{
border-right: 0px;
margin-right: 23px;
display:block;
width:93px;
}
.nav li.skip a{
width:93px;
}
/*.nav li.skip a:hover, li.top a:hover {
color: #e6e6e6 !important;*/
}
.fix:after{
content:".";display:block;
height:0;
clear:both;
visibility:hidden;
}
.fix{
display:inline-block;
}
* html .fix{height:1%;}
.fix{display:block;}
ul.downnav {
list-style: none;
margin-bottom:20px;
}
li.down-top{float:right;display:block; width:100px;}
li.down-top a{width:100px;}

Guardamos los cambios y en un gadget de HTML que más tarde arrastraremos hasta el lugar indicado incluimos lo siguiente:

<div class="nav">
<ul class="nav fix">
<li class="skip"><a href="url del enlace" title="Descripción">LINK4
<span>Descripción </span></a></li>
<li><a href="url del enlace" title="Descripción">LINK3
<span>Descripción </span></a></li>
<li><a href="url del enlace" title="Descripción">LINK2
<span>Descripción </span></a></li>
<li><a href="url del enlace" title="Descripción">LINK1
<span>Descripción </span></a></li>
<li><a href="url del enlace" title="Descripción">Home
<span>Descripción </span></a></li>
</ul>
</div>

El resultado sería más o menos así:

LINK4 Descripción LINK3 Descripción LINK2 Descripción LINK1 Descripción Home Descripción

El menu contiene dos imágenes, una de fondo que añadimos en los estilos de la plantilla donde dice url-imagen-fondo-menu

La otra imagen es una transparencia para el efecto hover y la añadimos donde dice url-imagen-transparencia.

Naturalmente para añadir las imágenes antes debemos alojarlas en un servidor para conseguir la url, yo siempre recomiendo alojar las imágenes en una entrada de Blogger que más tarde guardaremos en borrador.

Si el fondo de nuestro blog no es oscuro o simplemente deseamos una fuente en color distinto podemos modificar los estilos.

» El texto siempre viene definido en la hoja de estilos con "color" en este caso para el texto superior buscamos ul.nav y sustituimos color:#BDAFA8;

» Si se trata del texto inferior buscaremos nav li a span y modificamos color:#7f7f7f;

» Para el tamaño modificamos según el texto con font-size.

» Hay una barrita vertical apenas perceptible en el fondo oscuro que separa el texto de los enlaces, podemos cambiar su color en nav li donde dice border-right:1px solid #333333;

» Configuramos el menu en el gadget de HTML y añadimos la página a enlazar donde dice url del enlace

» En title donde Descripción es el sitio donde incluimos el texto que aparece al pasar el ratón.

» Sustituimos LINK1- LINK2- LINK3- LINK4- por el texto del enlace que vamos a mostrar.

» Igual haremos con Home podemos sustituirlo o dejarlo así y enlazar con la url de nuestro blog para actualizar la página.

LINK4 Descripción LINK3 Descripción LINK2 Descripción LINK1 Descripción Home Descripción